<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>YUI Calendar - Popup Calendar (YUI Library)</title>

	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">

	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
	<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>

<body>

	<div id="doc3" class="yui-t4">
		<div id="hd">
			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
			<h1>YUI Calendar: Popup Calendar</h1>
		</div>

		<div id="bd">

					<div id="toc" class="yui-b">
			<ul>
				<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>

<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item selected"><a href="1.html">Popup Calendar</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
			</ul>
		</div>
			<div id="yui-main">
				<div class="yui-b">
					<h1 class="first">Setting up the Calendar</h1>

					
			<p>Calendar can be positioned absolutely to make it float above the document, and it provides a few extra configuration properties specifically geared towards applying it in this way. Those properties are: </p>
			
			<ul class="properties">
				<li><strong>close</strong> - Indicates whether or not a close icon should be displayed in the Calendar. Defaults to false.</li>
				<li><strong>iframe</strong> - Indicates whether or not an IFRAME shim should be placed under the Calendar to avoid the bleed-through of "select" elements in IE6 and below. Defaults to true for IE6 and below, when the Calendar is positioned absolutely or relatively.</li>
			</ul>

			<p>In addition, the Calendar provides <em>show</em> and <em>hide</em> methods for displaying the Calendar or hiding it from view. This is achieved by setting the Calendar's outer container to <em>display:none</em>.</p>

			<p>In this tutorial, we will create a Calendar and a CalendarGroup which can be displayed by clicking a corresponding button. First, the Calendar and CalendarGroup are instantiated using some of the new properties that were introduced in this tutorial.</p>

			<textarea name="code" class="JScript" cols="60" rows="1">
				YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { pages:3, title:"Please make a selection:", close:true } );
				YAHOO.example.calendar.cal1.render();

				// Listener to show the 3-up Calendar when the button is clicked
				YAHOO.util.Event.addListener("show3up", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true);

				YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2","cal2Container", { title:"Choose a date:", close:true } );
				YAHOO.example.calendar.cal2.render();

				// Listener to show the 1-up Calendar when the button is clicked
				YAHOO.util.Event.addListener("show1up", "click", YAHOO.example.calendar.cal2.show, YAHOO.example.calendar.cal2, true);
			</textarea>

			<p>Next, we place the markup for the buttons that will invoke the Calendar and CalendarGroup, along with the container div elements that are required for each.</p>

			<textarea name="code" class="HTML" cols="60" rows="1">
				<button id="show3up">Show a 3-up Calendar</button>
				<div id="cal1Container"></div>

				<button id="show1up">Show a Single Calendar</button>
				<div id="cal2Container"></div>
			</textarea>

					<div id="stepnav">
						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
				</div>
			</div>
		</div>

		<div id="ft">&nbsp;</div>
	</div>	

	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript"> 
		dp.SyntaxHighlighter.HighlightAll('code'); 
	</script>

</body>
</html>